<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios案例</title>
    <script src="src/vue.js"></script>
    <script src="src/axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取所有图书数据" @click="show_books">
        <table>
            <tr v-for="book in books">
                <td>{{ book.id }}</td>
                <td>{{ book.btitle }}</td>
                <td>{{ book.bpub_date }}</td>
                <td>{{ book.bread }}</td>
                <td>{{ book.bcomment }}</td>
            </tr>
        </table>
    </div>

</body>
<script>
    // 创建vue对象
    var vm = new Vue({
        el: "#app",
        data:{
            books:[],
        },
        methods:{
            show_books: function () {
                // 使用axios请求后端API:GET http://127.0.0.1:8000/books/
                axios.get('http://127.0.0.1:8000/books/')
                    .then(response => {
                        // 请求成功执行代码
                        // 获取响应数据：response.data
                        // console.log(response.data);
                        this.books = response.data;
                    }).catch(error => {
                        // 请求失败执行的代码
                        // 获取响应数据: error.response.data
                        console.log(error.response.data)
                })
            }
        }
    })
</script>
</html>